<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Task Viewer</title>
  <link rel="stylesheet" href="../../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
  <!--
    <link rel="stylesheet" href="modal.css"/>
    -->
  <style type="text/css">
    .site-bgcolor {
      background: AliceBlue
    }

  </style>
</head>
<body>
<!-- <div id="app" class="container"> -->
<div id="app" class="container-fluid">

  <div class="row-fluid">
    <div class="col-sm-12">
      <h3 class="page-header text-center">
        任务管理
        <small>{{modeTitle}} (Task Viewer)</small>
      </h3>
    </div>
  </div>

  <!-- The content will change according to currentView variable -->
  <!--
      <component is="{{currentView}}">
      </component>
      -->

  <div id="objectlist" v-show="mode=='modeList'">
    <div class="row">
      <div class="col-sm-12">
        <div class="col-sm-3">
          <button class="btn btn-default" v-on:click="onRemoveSelected($event)">删除选中记录</button>
          <!--
            <button class="btn btn-default" v-on="click: showModal=true">新增</button>
            <button class="btn btn-default" v-on:click="mode='modeAddNew'">新增</button>
          -->
          <button class="btn btn-default" v-on:click="setMode('modeAddNew')">新增</button>
        </div>
        <!-- <form id="search"> -->
        <div class="col-sm-offset-3 col-sm-3">
          <input id="searchQuery" name="query" type="text" style="float:right" v-model="searchQuery"
                 class="form-control" required/>
        </div>
        <div class="col-sm-2">
          <button id='search' class="btn btn-outline btn-block btn-success save" v-on:click="basicsearch($event)">
            <strong>搜索</strong></button>
        </div>
        <div class="col-sm-1 text-left vertical-middle-sm">
          <h5><strong>
            <a role="button" class="control-label" data-toggle="collapse" href="#advancedsearch" aria-expanded="false"
               aria-controls="advancedsearch">高级...</a>
          </strong></h5>
        </div>
        <!-- </form> -->
      </div>
    </div>

    <div class="row">
      <div class="col-sm-12">
        <br/>
      </div>
    </div>

    <div class="row">
      <div class="collapse col-sm-12" id="advancedsearch">
        <div class="well">
          <div class="row">
            <!-- <form class="form-horizontal contract-form"> -->
            <div class="form-group">
              <label class="col-sm-1 control-label">Begin Time</label>

              <div class="col-sm-5">
                <input id="begintime" name="begintime" type="text" v-model="begintime" value="2015-01-01"
                       class="form-control" required/>
              </div>
              <label class="col-sm-1 control-label">End Time</label>

              <div class="col-sm-5">
                <input id="endtime" name="endtime" type="text" v-model="endtime" value="2015-02-01"
                       class="form-control" required/>
              </div>
            </div>
            <!--
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">FirstName MidName LastName</label>
                                        <div class="col-sm-3">
                                            <input type="text" v-model="firstname" value="" class="form-control"/>
                                        </div>
                                        <div class="col-sm-1">
                                            <input type="text" v-model="midname" value="" class="form-control"/>
                                        </div>
                                        <div class="col-sm-6">
                                            <input type="text" v-model="lastname" value="" class="form-control"/>
                                        </div>
                                    </div>
            -->
            <div class="form-group">
              <label class="col-sm-1 control-label">Logger Id</label>

              <div class="col-sm-5">
                <input id="deviceid" name="deviceid" type="text" v-model="remotedevice" value="" class="form-control"
                       required/>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-9 col-sm-1">
                <button class="btn btn-outline btn-block btn-warning">清除</button>
              </div>
              <div class="col-sm-2">
                <button id='submitbutton' class="btn btn-outline btn-block btn-success save"
                        v-on:click="advancedsearch($event)">提交
                </button>
              </div>
            </div>
            <!-- </form> -->
          </div>
        </div>
      </div>
      <!-- advancedsearch -->
    </div>

    <div class="row">
      <div class="table-responsive col-sm-12">
        <table class="table table-bordered table-condensed table-striped">
          <thead>
          <tr class="info">
            <th>选择</th>
            <th>唯一标识</th>
            <th>负责人</th>
            <th>描述</th>
            <th>截止期</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <!--
                  <tfoot>Table footer</tfoot>
                  -->
          <tbody>
          <!--
                      <tr v-repeat="item:items" track-by="id">
                      -->
          <tr v-for="item in items" track-by="id">
            <td><input type="checkbox" v-model="item.selected"></td>
            <td><a href="#" v-on:click="onEdit(item,$event)"> {{item.id}} </a></td>
            <td>{{item.owner}}</td>
            <td>{{item.description}}</td>
            <td>{{item.deadline}}</td>
            <td>{{item.objectstate}}</td>
            <!--
                      <td>{{item.firstname}}</td>
                      <td>{{item.gender}}</td>
                      <td>{{item.email}}</td>
                      <td>{{item.mobilephone}}</td>
                      <td>
                      -->
            <!--
                      <button class="btn btn-default btn-xs " v-on="click:onRemoveItem(item,$event)"> 删除 </button>
                      <button class="btn btn-default btn-xs " v-on="click:onEdit(item,$event)"> 编辑 </button>
                      <a href="#" v-on="click:mode='modeEdit'"> 编辑 </a>
                      <a href="#" v-on="click:showModal=true"> 编辑 </a>
                      <a href="#" v-on="click:setMode('modeEdit')"> 编辑 </a>
                      -->
            <td>
              <a href="#" v-on:click="onRemoveItem(item,$event)"> 删除 </a> |
              <a href="#" v-on:click="onEdit(item,$event)"> 编辑 </a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <div class="col-sm-12">
        注：测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
      </div>
    </div>

    <!--
        <div class="col-md-12">
            <div class="row">
            <div class="col-md-6">
                <label for="search-query"></label>
                <input type="text" id="search-query" v-model="searchQuery" class="form-control" placeholder="Search..." style="width: 200px">
            </div>
            <div class="col-md-6">
                <pagination id="my-table" class="pull-right"></pagination>
            </div>
            </div>
            <grid rows="{{gridData}}" columns="{{gridColumns}}" filter-key="{{searchQuery}}" per-page="5" id="my-table"></grid>
            <hr>
            <grid rows="{{gridData2}}" columns="{{gridColumns2}}" per-page="10" id="another-table"></grid>
            <pagination id="another-table"></pagination>
        </div>
        -->
  </div>
  <!-- object list view -->


  <!-- The following are for testing only -->

  <div id="objectviewer" class="row" v-show="mode=='modeItemView'">
    object viewer
  </div>

  <!--
      <div id="objecteditor" class="row" v-show="(mode=='modeEdit') || (mode='modeAddNew')">
          object editor
      </div>
      -->
  <!--
      <itemeditor mode="{{mode}}" item="{{curitem}}" on-load="{{onChildLoaded}}" onSubmit="{{onSave($event)}}" onCancel="{{onItemCancel}}"></itemeditor>
      -->

  <div id="objecteditor" v-show="mode=='modeAddNew'">
    <div class="row">
      <itemeditor :mode="mode" :item="curitem" :on-submit="onSave" :on-cancel="onCancel"></itemeditor>
    </div>
  </div>

  <div id="objecteditor2" v-show="mode=='modeEdit'">
    <div class="row">
      <itemeditor :mode="mode" :item="curitem" :on-submit="onSave" :on-cancel="onCancel"></itemeditor>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <hr/>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12 text-center">
      <span>{{curdate}}</span>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12 text-center"><br/></div>
  </div>

		<pre>
			<div>{{ $curitem | json }}</div>
			<div>{{ $data | json }}</div>
		</pre>

</div>
<!-- app -->


<template id="itemeditor-tpl">
  <div class="col-sm-12">
    <!-- <form class="form-horizontal"> -->
    <div class="form-horizontal">
      <!--
            <div class="form-group">
                <div class="col-sm-offset-9 col-sm-1 ">
                    <button type="submit" class="btn-block btn btn-default" v-on="click:setMode('modeList')">Cancel</button>
                </div>
                <div class="col-sm-2">
                    <button type="submit" class="btn-block btn btn-default pull-right" v-on="click:onAddNew($event)">Submit</button>
                </div>
            </div>
            -->
      <div class="site-bgcolor">
        <hr/>
        <div class="form-group">
          <label for="id" class="col-sm-2 control-label">Id</label>

          <div class="col-sm-4">
            <input class="form-control" id="id" readonly="readonly" v-model="item.id">
          </div>
          <label for="description" class="col-sm-1 control-label">Description</label>

          <div class="col-sm-4">
            <input class="form-control" id="description" v-model="item.description">
          </div>

          <!--
                  <div class="form-right-col">
                      <img height="300" src="image/to_be_added.jpg"/>
                      <label>Notes:</label>
                      <textarea id="description" name="description">description text here</textarea>
                  </div>
                  -->
        </div>
        <!--
              <div class="form-group">
                  <label for="name" class="col-sm-2 control-label" >Name</label>
                  <div class="col-sm-4">
                      <input class="form-control" id="name" placeholder="First Name" v-model = "item.firstname" />
                      <input class="form-control" id="name" placeholder="Middle Name" v-model = "item.midname"/>
                      <input class="form-control" id="name" placeholder="Last Name" v-model="item.lastname" />
                  </div>
                  <label for="name" class="col-sm-1 control-label">Gender</label>
                  --
                  <div class="checkbox">
                      <label>
                          <input type="checkbox" v-model="item.gender"> Male
                      </label>
                  </div>
                  --
              </div>
              <div class="form-group">
                  <label for="inputEmail" class="col-sm-2 control-label">Email</label>
                  <div class="col-sm-4">
                      <input type="email" class="form-control" id="inputEmail" placeholder="Email" v-model="item.email">
                  </div>
                  <label for="inputEmail" class="col-sm-1 control-label">Email</label>
                  <div class="col-sm-4">
                      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                  </div>
              </div>
              <div class="form-group">
                  <label for="mobilephone" class="col-sm-2 control-label">MobilePhone</label>
                  <div class="col-sm-4">
                      <input class="form-control" id="mobilePhone" placeholder="MobilePhone" v-model="item.mobilephone">
                  </div>
                  <label for="mobilephone" class="col-sm-1 control-label">MobilePhone</label>
                  <div class="col-sm-4">
                      <input class="form-control" id="mobilePhone" placeholder="MobilePhone">
                  </div>
              </div>
              <div class="form-group">
                  <label for="identitycard" class="col-sm-2 control-label">IdentityCard</label>
                  <div class="col-sm-4">
                      <input class="form-control" id="identityCard" placeholder="IdentityCard">
                  </div>
                  <label for="identitycard" class="col-sm-1 control-label">IdentityCard</label>
                  <div class="col-sm-4">
                      <input class="form-control" id="identityCard" placeholder="IdentityCard">
                  </div>
              </div>
              <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                  <div class="col-sm-9">
                      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                  </div>
              </div>
              <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                      <div class="checkbox">
                          <label>
                              <input type="checkbox"> Remember me
                          </label>
                      </div>
                  </div>
              </div>
              <hr />
              </div>
              -->

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default" v-on:click="onCancelClick($event)">取消</button>
            <!--
                      <button type="submit" class="btn btn-default" v-on="click:onAddNew($event)">Submit</button>
                      -->
            <button class="btn btn-default" v-on:click="onSubmitClick($event)">提交</button>
          </div>
        </div>
      </div>
    </div>
    <!-- </form> -->
    <!--
        <pre>
            <div>{{ $data | json }}</div>
        </pre>
        -->
  </div>
</template>

<script src="../../module/foundation.js"></script>
<script src="../../../node_modules/jquery/2.1.4/jquery-2.1.4.min.js"></script>
<script src="../../lib/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="../../lib/vue/1.0.21/vue.js"></script>
<script src="../../lib/vue-resource/0.7.0/vue-resource.js"></script>
<!--
<script src="vue-components-v12.js"></script>
-->
<script src="task-v2.js"></script>
</body>
</html>
